import { computed, defineComponent, ref } from 'vue';
import Actions from './Actions.vue';
import Avatar from './Avatar.vue';
import Basic from './Basic.vue';
import Caption from './Caption.vue';
import Grouping from './Grouping.vue';
import GroupingCustomBadge from './GroupingCustomBadge.vue';
import Icon from './Icon.vue';
import Multiline from './Multiline.vue';
import Positioning from './Positioning.vue';
import PredefinedTypesCustom from './PredefinedTypesCustom.vue';
import PredefinedTypesDefault from './PredefinedTypesDefault.vue';
import Spinner from './Spinner.vue';
import TimeoutProgress from './TimeoutProgress.vue';
import UnsafeHtml from './UnsafeHtml.vue';
import Updatable from './Updatable.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Actions</h5>
            <Actions />
          </div>
          <div class='block-'>
            <h5 class='title'>Avatar</h5>
            <Avatar />
          </div>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>Caption</h5>
            <Caption />
          </div>
          <div class='block-'>
            <h5 class='title'>Grouping</h5>
            <Grouping />
          </div>
          <div class='block-'>
            <h5 class='title'>GroupingCustomBadge</h5>
            <GroupingCustomBadge />
          </div>
          <div class='block-'>
            <h5 class='title'>Icon</h5>
            <Icon />
          </div>
          <div class='block-'>
            <h5 class='title'>Multiline</h5>
            <Multiline />
          </div>
          <div class='block-'>
            <h5 class='title'>Positioning</h5>
            <Positioning />
          </div>
          <div class='block-'>
            <h5 class='title'>PredefinedTypesCustom</h5>
            <PredefinedTypesCustom />
          </div>
          <div class='block-'>
            <h5 class='title'>PredefinedTypesDefault</h5>
            <PredefinedTypesDefault />
          </div>
          <div class='block-'>
            <h5 class='title'>Spinner</h5>
            <Spinner />
          </div>
          <div class='block-'>
            <h5 class='title'>TimeoutProgress</h5>
            <TimeoutProgress />
          </div>
          <div class='block-'>
            <h5 class='title'>UnsafeHtml</h5>
            <UnsafeHtml />
          </div>
          <div class='block-'>
            <h5 class='title'>Updatable</h5>
            <Updatable />
          </div>
        </div>
      );
    };
  },
});
